// import React from 'react';
// import JsBarcode from 'jsbarcode';

// export class RefundSheet extends React.Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       value: props.barCode, //由父组件传入用来生成条形码的字符串“barCode”
//     };
//   }
//   componentDidMount() {
//     const { width, height } = this.props;
// 　　// 调用 JsBarcode方法生成条形码
// console.log(height)
//     JsBarcode(this.barcode, this.state.value, {
//       // width,
//       height,
//       displayValue: false,
//       width: 1.5,
//       // height: 50,
//       margin: 0,
//     });
//   }

//   render() {
//     const { width, height } = this.props;
//     return (
//       <div className="barcode-box" style={{width, height}}>
//         <svg
//           ref={(ref) => {
//             this.barcode = ref;
//           }}
//         />
//       </div>
//     );
//   }
// }
// export default RefundSheet;//导出组件





import React, { Component } from 'react';
import Barcode from 'jsbarcode';

/**
 * 简单生成条形码
 */
class SimpleBarcode extends Component {
    componentDidMount() {
        this.createBarcode();
    }

    componentDidUpdate() {
      this.createBarcode();
    }

    createBarcode = () => {
        const {width = 1.5, height = 35, margin = 0, value, displayValue } = this.props;
        if (this.barcode && value){
            Barcode(this.barcode, value, {
                displayValue, //是否在下面显示具体文字
                width, //线的宽度系数,1是正常,2是两倍,数越大越粗.
                height: displayValue ? height -26 : height,// 条形码高度
                margin,
            });
        } 
    };

    render() {
        const { className } = this.props;
        return (
            <div className={className}>
                <svg
                    ref={(ref) => {
                        this.barcode = ref;
                    }}
                />
            </div>
        );
    }
}

export default SimpleBarcode;

// import { useEffect, useRef } from 'react';

// const SimpleBarcode = ({ height, value, displayValue = true }) => {

//   const code = useRef(null);

//   useEffect(()=>{
//     createBarcode()
//   },[])

//   useEffect(()=>{
//     createBarcode()
//   },[height, value])

//   const createBarcode = () => {
//     if (!value) return;
//     // const {width = 1, height = 35, margin = 0, value, displayValue = true } = this.props;
//     console.log(code)
//     Barcode(code, value, {
//         displayValue, //是否在下面显示具体文字
//         width:1, //线的宽度系数,1是正常,2是两倍,数越大越粗.
//         height,// 条形码高度
//         margin:0,
//     });
//   };

//   return (
//     <div>
//        <svg ref={code}></svg>
//     </div>
//   )
// }

// export default SimpleBarcode;
